<!-- templates/pay-detail-update.html -->
{% extends "base.html" %}
{% block title %}
    修改采购明细
{% endblock %}
{% block main %}
    <div class="col-10 offset-1">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">采购明细信息</h3>
            </div>
            <form method="post" id="payDetailForm" class="form-horizontal">
                {% csrf_token %}
                <input type="hidden" name="PDid" value="{{ PDid }}">
                <input type="hidden" name="Pid" value="{{  form.instance.Pid }}">
                <div class="card-body">
                    <div class="form-group">
                        <label>商品编号</label>
                        <input value="{{ form.instance.Gid }}" type="text" name="Gid" class="form-control"
                               placeholder="商品编号">
                    </div>
                    <div class="form-group">
                        <label>采购数量</label>
                        <input value="{{ form.instance.Pcount }}" type="number" name="Pcount" class="form-control"
                               placeholder="采购数量">
                    </div>
                    <div class="form-group">
                        <label>商品单价</label>
                        <input value="{{ form.instance.GPay }}" type="number" step="0.01" name="GPay"
                               class="form-control" placeholder="商品单价">
                    </div>
                    <div class="form-group">
                        <label for="other">备注</label>
                        <input type="text" value="{{ form.instance.other }}" class="form-control" id="other"
                               name="other">
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-4 offset-1">
                            <button type="submit" class="btn btn-primary btn-block">立即修改</button>
                        </div>
                        <div class="col-4 offset-1">
                            <button onclick="history.back()" type="button" class="btn btn-default btn-block">返回
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });

            $.validator.addMethod("positiveNumber", function (value, element) {
                return Number(value) > 0;
            }, "请输入大于零的数字。");

            $.validator.setDefaults({
                submitHandler: function () {
                    $.ajax({
                        async: true,
                        cache: false,
                        url: "{% url 'pay_detail_update'  PDid=PDid %}",
                        data: $("#payDetailForm").serialize(),
                        type: "post",
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 200) {
                                Toast.fire({
                                    icon: 'success',
                                    title: res.message
                                });

                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: res.message
                                });
                            }
                        }
                    });
                }
            });

            $('#payDetailForm').validate({
                rules: {
                    Gid: {
                        required: true,
                        maxlength: 10
                    },
                    Pcount: {
                        required: true,
                        digits: true,
                        positiveNumber: true
                    },
                    GPay: {
                        required: true,
                        number: true,
                        positiveNumber: true
                    }
                },
                messages: {
                    Gid: {
                        required: '请输入商品编号',
                        maxlength: '商品编号最多10个字符'
                    },
                    Pcount: {
                        required: '请输入采购数量',
                        digits: '采购数量必须是整数',
                        positiveNumber: '请输入大于零的数字'
                    },
                    GPay: {
                        required: '请输入商品单价',
                        number: '请输入有效的数字',
                        positiveNumber: '请输入大于零的数字'
                    }
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });
    </script>
{% endblock %}
